﻿<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this example is demonstrated how to bind jqxGrid to MySQL Database.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>	
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>		
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>	
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>	
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>	
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	   var theme = getTheme();
         
		var source =
		{
			datatype: "json",
			datafields: [
				{ name: 'CompanyName'},
				{ name: 'ContactName'},
				{ name: 'ContactTitle'},
				{ name: 'Address'},
				{ name: 'City'}
			],
			url: 'grid_data.php',
			cache: false
		};

		var dataAdapter = new $.jqx.dataAdapter(source);
			
		$("#jqxgrid").jqxGrid(
		{
		source: source,
		theme: theme,
		columns: [
			{ text: 'Company Name', datafield: 'CompanyName', width: 250},
			{ text: 'ContactName', datafield: 'ContactName', width: 150 },
			{ text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
			{ text: 'Address', datafield: 'Address', width: 200 },
			{ text: 'City', datafield: 'City', width: 120 }
		]
		});        
	});
</script>
</head>
	<body class='default'>
		<div id="jqxgrid"></div>
		</div>
	</body>
</html>
<!--grid_data.php
	#Include the connect.php file
	include('connect.php');
	#Connect to the database
	//connection String
	$connect = mysql_connect($hostname, $username, $password)
	or die('Could not connect: ' . mysql_error());
	//select database
	mysql_select_db($database, $connect);
	//Select The database
	$bool = mysql_select_db($database, $connect);
	if ($bool === False){
	print "can't find $database";
	}
	// get data and store in a json array
	$query = "SELECT * FROM Customers";
	$from = 0; 
	$to = 30;
	$query .= " LIMIT ".$from.",".$to;

	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
	$customers[] = array(
		'CompanyName' => $row['CompanyName'],
		'ContactName' => $row['ContactName'],
	'ContactTitle' => $row['ContactTitle'],
	'Address' => $row['Address'],
	'City' => $row['City']
		);
	}

	echo json_encode($customers);
-->